<template>
  <div class="block-box">
    <div class="block-header-box" :style="{ color: currentType.color }">
      <div class="block-header">{{ currentType?.name }}</div>
      <div class="__other">
        <div class="__unit">单位：{{currentType?.unit}}</div>
        <div class="__icon">
          <span :class="`iconfont ${isUp? 'icon-shangsheng' : 'icon-xiajiang'}`"></span>
        </div>
        <div :class="`__rate`">环比上月&nbsp;&nbsp;<span :class="`${isUp? 'is-up' : 'is-down'}`">{{ changeRate }}</span></div>
      </div>
    </div>
    <div class="chart-row">
      <div class="__chart">
        <div class="chart-chart" :id="domIds.last"></div>
        <div class="chart-name bluebg">上月&nbsp;{{data.lastTotal}}</div>
      </div>
      <div class="__chart">
        <div class="chart-chart" :id="domIds.curr"></div>
        <div class="chart-name greenbg">本月累计&nbsp;{{currentMonthTotal}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed, watch, toRefs, ref, reactive, onUnmounted } from 'vue';
import Big from 'big.js';
import usePie from './usePie';
import usePieNormal from './usePieNormal';

const getRate = (value) => {
  if (value || value == 0) { return new Big(value).times(100) + '%' }
  return '';
}
const getRandomId = () => {
  return `{Date.now()}_${Math.ceil(Math.random() * 10000)}`;
}
const domIds = reactive({
  last: getRandomId(),
  curr: getRandomId(),
})
const props = defineProps({
  type: {
    type: String,
    default: 'elec',
  },
  typeName: {
    type: String,
    default: '电%',
  },
  data: {
    type: Object,
    default: () => ({
      lastTotal: 0,
      total: 0,
      changeRate: '-'
    })
  },
  rate: {}
});
const { data } = toRefs(props);

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let timmer: any = null;
const currentSelectIndex = ref(0);
const hasAdd = ref(0);
const currentMonthTotal = computed(() => {
  if (data.value.total) {
    return new Big(data.value.total).plus(hasAdd.value);
  }
  return 0;
});
const changeRate = computed(() => {
  const last = data.value.lastTotal;
  if (last) {
    const _rate = ((currentMonthTotal.value - last) / last) * 100
    return parseFloat(_rate.toFixed(2)) + '%'
  }
  return '0';
});
const isUp =  computed(() => {
  const last = data.value.lastTotal;
  return currentMonthTotal.value > last;
});
usePie({
  id: domIds.curr,
  data: data,
  key: 'curMonth'
});
usePieNormal({
  id: domIds.last,
  data: data,
  key: 'lastMonth'
});
const setData = (newData) => {
  const temp = getRandomNumber(0, 10);
  let selectIndex = currentSelectIndex.value;
  if (hasAdd.value < 200) {
    hasAdd.value = hasAdd.value + temp;
  } else {
    hasAdd.value = 0;
  }
  if (currentSelectIndex.value < (newData.curMonth.length - 1)) {
    currentSelectIndex.value = currentSelectIndex.value + 1;
    selectIndex += 1;
  } else {
    currentSelectIndex.value = 0;
    selectIndex = 0;
  }
}
watch(() => props.data, (val) => {
  if (val) {
    setData(val);
    timmer = setInterval(() => {
      setData(val);
    }, props.rate);
  }
}, { deep: true });
const typeObj = ref({
  elec: {
    icon: 'icon-dianli',
    color: '#008bd5',
    name: '电',
    unit: 'KWH'
  },
  gas: {
    icon: 'icon-qiti',
    color: 'rgb(137,71,105)',
    name: '燃气',
    unit: 'm³'
  },
  water: {
    icon: 'icon-gongshui',
    color: 'rgb(62,179,80)',
    name: '水',
    unit: 'T'
  },
});
const currentType = computed(() => {
  return typeObj.value[props.type];
});
onUnmounted(() => {
  clearInterval(timmer);
})
</script>

<style lang="scss" scoped>
.block-box {
  height: 33%;
  padding-bottom: 0.5vh;

  >div {
    flex-shrink: 0;
  }

  .block-header-box {
    display: flex;
    align-items: center;
    margin-right: 1.5vh;
    margin-left: 3px;
    padding: 0 2vh;
    background: rgb(0 0 0 / 15%);
    color: #fff;
  }

  .block-header {
    position: relative;
    flex: 1;
    padding-left: 13px;
    font-size: 1.8vh;
    font-weight: 600;
    line-height: 1.8vh;
    height: 1.8vh;

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 0;
      width: 3px;
      height: 1.4vh;
      border-radius: 3px;
      background: #0067cc;
    }
  }

  .__other {
    font-size: 1.2vh;
    display: flex;
    color: #ffffff;

    .__icon {
      margin: 0 2px 0 5px;
    }

    .iconfont {
      font-size: 1.4vh;
    }

    .icon-shangsheng, .is-up {
      color: #0067cc;
    }

    .icon-xiajiang, .is-down {
      color: #ce881f;
    }

    .__rate {
      span {
        display: inline-block;
        width: 5vh;
      }
    }
  }

  .chart-row {
    height: calc(100% - 1.8vh);
    overflow: hidden;

    .__chart {
      width: 50%;
      padding: 0 1vh;
      height: 100%;
      float: left;
    }

    .chart-chart {
      height: calc(100% - 1.4vh);
      overflow: hidden;
    }

    .chart-name {
      font-size: 1.2vh;
      height: 1.4vh;
      line-height: 1.4vh;
      text-align: center;

      &.bluebg {
        background: rgba(#416991, .15);
        color: #86b4e2;
      }

      &.greenbg {
        background: rgba(62, 179, 80, .15);
        color: rgb(62, 179, 80);
      }
    }
  }
}
</style>
